<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!-- 自定义CSS -->
<style type="text/css">
		.drag{
			width:100px;
			height:50px;
			padding:10px;
			margin:5px;
			border:1px solid #ccc;
			background:#AACCFF;
		}
		.dp{
			opacity:0.5;
			filter:alpha(opacity=50);
		}
		.over{
			background:#FBEC88;
		}
	    /*模板标题背景*/
		.templateTitle_bg{
		    background: url(${pageContext.request.contextPath}/images/template/templatetable_bg.png) center center;
		    background-repeat: no-repeat;
		}
		/*模板描述背景*/
		.template_desc_bg{
		    background: url(${pageContext.request.contextPath}/images/template/template_desc_bg.png) center center;
		    background-repeat: no-repeat;
		}
		/*表格背景*/
		.templatetableClass{
		    background: url(${pageContext.request.contextPath}/images/template/templatetable_bg.png) repeat-y;
		    width:188px;
		}
		/*模板查询样式*/
		.template_search{
		   background: url(${pageContext.request.contextPath}/images/template/template_search.png) repeat-x;
		   height:50px;
		}
		.div_Class{
	        cursor:pointer;
	        margin:4px 12px 4px 12px;
	        background-image: url(${pageContext.request.contextPath}/images/template/char_bg.png);
	        background-repeat: no-repeat;
	        width:188px;
	        float:left;
        }
        .div_Class_Move{
            cursor:pointer;
	        margin:4px 12px 4px 12px;
	        background-image: url(${pageContext.request.contextPath}/images/template/char_move_bg.png);
	        background-repeat: no-repeat;
	        width:188px;
	        float:left;
        }
          .draggable_Class_Move{
            cursor:pointer;
	        background-image: url(${pageContext.request.contextPath}/images/template/char_move_bg.png);
	        background-repeat: no-repeat;
	        width:188px;
	        float:left;
        }
</style>

<script type="text/javascript">
$(document).ready(function(){
	$("#dqm_template_target").bind("click",function(){
		$("#dqm_template_drag_remove").removeClass("template_desc_bg");//开始拖拽时，移除背景说明
	});
	//自定义模板列表数据
	var templateList=[{"name":"指标名称","imageName":"kpiname","templateCode":"#KQINAME#"},
	                  {"name":"指标周期类型","imageName":"periodtype","templateCode":"#PERIODTYPE#"},
	                  {"name":"数据提取层","imageName":"datalevel","templateCode":"#DATALEVEL#"},
	                  {"name":"规则创建人","imageName":"creator","templateCode":"#CREATOR#"},
	                  {"name":"规则创建时间","imageName":"createtime","templateCode":"#CREATETIME#"},
	                  {"name":"指标数据","imageName":"value","templateCode":"#VALUE#"},
	                  {"name":"规则名称","imageName":"rulename","templateCode":"#RULENAME#"},
	                  {"name":"规则算法名称","imageName":"rulealgorithm","templateCode":"#RULEALGORITHM#"},
	                  {"name":"数据日期","imageName":"datadate","templateCode":"#DATADATE#"},
	                  {"name":"维度信息","imageName":"diminfo","templateCode":"#DIMINFO#"},
	                  {"name":"告警级别","imageName":"warnLevel","templateCode":"#WARNLEVEL#"},
	                  {"name":"规则计算结果值","imageName":"resultvalue","templateCode":"#RESULTVALUE#"},
	                  {"name":"阀值上限值","imageName":"thresholdmax","templateCode":"#THRESHOLDMAX#"},
	                  {"name":"阀值下限值","imageName":"thresholdmin","templateCode":"#THRESHOLDMIN#"},
	                  {"name":"阀值上限操作符","imageName":"thresholdmaxoperator","templateCode":"#THRESHOLDMAXOPERATOR#"},
	                  {"name":"阀值下限操作符","imageName":"thresholdminoperator","templateCode":"#THRESHOLDMINOPERATOR#"}
	                 ];
   
	var divStr="";
	var divSecondStr="";
	var strIdx="";
	for(var idx=0;idx<templateList.length;idx++){
		strIdx+="#source_"+idx+",";//拼接动态divId
		if(idx<=7){
		  divStr+="<div id='source_"+idx+"' class='div_Class' templateCode='"+templateList[idx].templateCode+"' onmouseover='changeMouseOverOrOut(this,1,\""+templateList[idx].imageName+"\")'  onmouseout='changeMouseOverOrOut(this,2,\""+templateList[idx].imageName+"\")' >"
				divStr+="<table border='0'>";
				   divStr+="<tr>";
				       divStr+="<td style='width:37px;height:36px;vertical-align: middle;text-align:center;'><img src='${pageContext.request.contextPath}/images/template/"+templateList[idx].imageName+".png' style='width:20px;height:20px'/></td>";
				       divStr+="<td style='width:151px;height:36px;' valign='middle'>&nbsp;<span>"+templateList[idx].name+"</span></br>&nbsp;<span style='color:#666666'>"+templateList[idx].templateCode+"</span></td>";
				   divStr+="</tr>";
				divStr+="</table>";
		   divStr+="</div>";
		}else{
			divSecondStr+="<div id='source_"+idx+"' class='div_Class'   templateCode='"+templateList[idx].templateCode+"' onmouseover='changeMouseOverOrOut(this,1,\""+templateList[idx].imageName+"\")'  onmouseout='changeMouseOverOrOut(this,2,\""+templateList[idx].imageName+"\")' >"
			   divSecondStr+="<table border='0'>";
			      divSecondStr+="<tr>";
			         divSecondStr+="<td style='width:37px;height:36px;vertical-align: middle;text-align:center;'><img src='${pageContext.request.contextPath}/images/template/"+templateList[idx].imageName+".png' style='width:20px;height:20px'/></td>";
			         divSecondStr+="<td style='width:151px;height:36px;' valign='middle'>&nbsp;<span>"+templateList[idx].name+"</span></br>&nbsp;<span style='color:#666666'>"+templateList[idx].templateCode+"</span></td>";
			      divSecondStr+="</tr>";
			   divSecondStr+="</table>";
			divSecondStr+="</div>";
		}
	}
	$("#dqm_template_source_first").html(divStr);//加载第一个div数据
	$("#dqm_template_source_second").html(divSecondStr);//加载第二个div数据
	$("#dqm_template_source_second").hide();
	
	$('.div_Class').draggable({
		proxy:'clone',
		revert:true,
		cursor:'auto',
		onStopDrag:function(){
			$("#dqm_template_drag_remove").removeClass("template_desc_bg");//开始拖拽时，移除背景说明
			$(this).draggable('options').cursor='auto';
			var currObj=$(this).clone();
			var currIdx=$(currObj).attr("id");//获取divId
		    var index=currIdx.substring(currIdx.lastIndexOf("_")+1,currIdx.length);
			var data=$("#"+currIdx).attr("templateCode");
			$("#dqm_template_target").append("&nbsp;&nbsp;<span style='font-size:15px;font-weight:blod;color:red'>"+data+"</span>&nbsp;&nbsp;");
		}
	});


});
// 拼接新的table样式放入指定区域
function appendTable(draggable){
	var tableStr="";
		tableStr+="<div class='draggable_Class_Move' >"+draggable+"</div>";
    return tableStr;
}
//获取鼠标移入溢出效果，改变当前样式
function changeMouseOverOrOut(obj,idx,imagename){
	if(idx==1){//鼠标移入
	  $(obj).removeClass("div_Class");
	  $(obj).addClass("div_Class_Move");
	  //改变当前图标样式
	  $(obj).children().children().children().children().children().attr("src",ctx+"/images/template/"+imagename+"_move.png");;
	}else{//鼠标溢出
	  $(obj).removeClass("div_Class_Move");
	  $(obj).addClass("div_Class");
	  $(obj).children().children().children().children().children().attr("src",ctx+"/images/template/"+imagename+".png");;
	}
	
}
//圆形图标滑动效果
function cycleOnfocus(idx){
	if(idx==1){
		$("#dqm_template_source_cycle_selectId").attr("src",ctx+"/images/template/cycle_select.png");
		$("#dqm_template_source_cycle_unselectId").attr("src",ctx+"/images/template/cycle_unselect.png");
		if($("#dqm_template_source_second").css("display")=="block"){
			 $("#dqm_template_source_second").css("display", "none");
		     $("#dqm_template_source_first").show();
		}
	}else{
		$("#dqm_template_source_cycle_selectId").attr("src",ctx+"/images/template/cycle_unselect.png");
		$("#dqm_template_source_cycle_unselectId").attr("src",ctx+"/images/template/cycle_select.png");
		if($("#dqm_template_source_first").css("display")=="block"){
			 $("#dqm_template_source_first").css("display", "none");
		     $("#dqm_template_source_second").show();
		}
		
	}
}
//获取拖拽区域数值
function draggableData(){
	var tempContent=$("#dqm_template_target").html();
	var t=trimStr(tempContent);
	$("#template_main_temp_divId").html(t);
	var contentData=$("#template_main_temp_divId").text();
	if(""!=contentData && contentData.length>0){
		$("#template_main_templateContent").text(contentData);
		return true;
	}else{
		$.messager.alert("操作提示!","模板内容不允许为空！");
		return false;
	}
}

//取到字符串空格
function trimStr(str){
	var temp="";
	if(""!=str && null!=str){
		var reg=/&nbsp;/g; //正则表达式匹配&nbsp;
		temp= str.replace(reg,"=@@=");
	}
	return temp;
}
</script>
<div style="">
  <form id="template_main_form" method="post">
   <table border="solid thick #cbcbcb"  style="border-right:none;border-bottom:none;">
       <tr>
          <td style="height:50px;" colspan="2" class="template_search">
		      <span style="color:red;font-size:15px;margin-left:15px">*</span>模板名称：<input  type="text" id="templateName_add" name="templateName" class="easyui-validatebox" data-options="required:true,missingMessage:'模板名称必须填写'" style="width:265px;height:20px;"/>
		      <span id="template_main_templateName" style="color:red"></span>
		      <textarea  id="template_main_templateContent"  name="templateContent" style="display: none"></textarea>
		      <div id="template_main_temp_divId" style="display: none"></div>
          </td>
       </tr>
       <tr>
          <td style="width:215px;" valign="top">
              <table style="margin-top:2px;">
                   <tr>
                      <td valign="middle" style="background-image: url('${pageContext.request.contextPath}/images/template/templateTitle_bg.png');background-repeat: no-repeat;width:212px;height:38px;">
                         <div style="color:#FFFFFF;font-size:13px;font-weight:blod;text-align:center">模板替换字段</div>
                      </td>
                   </tr>
                   <tr>
                      <td>
                         <div  id="dqm_template_source_first" class="templatetableClass"     style="border:1px solid #cbcbcb;width:212px;">
	                     </div>
	                     <div  id="dqm_template_source_second" class="templatetableClass"    style="border:1px solid #cbcbcb;width:212px;">
	                     </div>
                      </td>
                   </tr>
                    <tr>
                      <td  style="height:40px;text-align:center" valign="middle">
                           <img title="查看模板列表" id="dqm_template_source_cycle_selectId" src="${pageContext.request.contextPath}/images/template/cycle_select.png" style=width:11px;height:11px;" onclick="cycleOnfocus(1)"/>
                           <img title="查看模板列表" id="dqm_template_source_cycle_unselectId" src="${pageContext.request.contextPath}/images/template/cycle_unselect.png" style="width:11px;height:11px;margin-left:25px;" onclick="cycleOnfocus(2)"/>
                      </td>
                    </tr>
              </table>
          </td>
          <td id="dqm_template_drag_remove" class="template_desc_bg" valign="top">
               <div id="dqm_template_target"  contentEditable=true style="word-wrap:break-word;font-size:13px;cursor:text;width:650px;height:400px;" >
               </div>
	           <div style="clear:both"></div>
          </td>
       </tr>
   </table>
  </form>
</div>